<div class="page-wrapper d-flex flex-column pt-4">
    <div class="container-xl">
        <div class="page-header d-print-none">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Listing
                    </div>
                    <h3 class="page-title">
                        All Databases
                    </h3>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body d-flex flex-row-reverse">

        <aside class="bd-sidebar sub-sidebar">
            <nav class="bd-links p-3" aria-label="Sub-section navigation">
                <div class="card card-body">
                    <div class="btn-group w-100 mb-3" role="group" aria-label="Basic example">
                        <a href="/portal/mix-database/create" class="btn btn-primary text-white m-0">
                            <i class="fas fa-plus"></i> Create Database
                        </a>
                    </div>
                    <filter-list request="request" orders="orders" callback="getList(pageIndex)"></filter-list>
                    <div class="input-group mt-3">
                        <label class="input-group-text" for="inputGroupSelect01">Bulk</label>

                        <select class="form-select" ng-model="selectedList.action">
                            <option selected>-- select --</option>
                            <option ng-repeat="item in actions" ng-value="item">{{item}}</option>
                        </select>
                        <a class="btn btn-sm btn-primary" ng-if="selectedList.data.length > 0 && selectedList.action"
                            ng-click="applyList()">Apply</a>
                    </div>
                </div>
            </nav>
        </aside>
        <div class="content-body py-3 pe-3">
            <div class="card mb-5">
                <div class="card-body">
                    <table class="table table-hover" cellspacing="0" ng-init="getList()">
                        <thead class="thead-light">
                            <tr>
                                <!-- <th class="col" style="width: 3%;">
                                </th> -->
                                <th class="col">
                                    <input type="checkbox" ng-model="selectedList.isSelectAll"
                                        ng-change="selectAll(selectedList.isSelectAll)" />
                                </th>
                                <th class="col">Database</th>
                                <th class="col">Name</th>
                                <th class="col">Type</th>
                                <th class="col">Author</th>
                                <th class="col"></th>
                                <th class="col"></th>
                                <th class="col"></th>
                            </tr>
                        </thead>

                        <tbody class="sortable">
                            <tr ng-repeat="item in data.items track by $index" class="sortable-item"
                                sort-model="mix-database" sort-model-id="{{item.id}}">
                                <!-- <td style="cursor:move;" class="drag-header">
                                    <small class="fa fa-grip-vertical fa-xs text-black-50 align-middle"></small>
                                </td> -->
                                <td>
                                    <div class="form-check">
                                        <input type="checkbox" ng-model="item.isSelected"
                                            ng-change="select(item.id, item.isSelected)" class="form-check-input" />
                                    </div>
                                </td>
                                <td>
                                    <a href="/portal/mix-database/details/{{item.id}}" title="Config database"
                                        class="btn-link">
                                        {{item.title}}
                                    </a>
                                </td>
                                <td>
                                    <small class="text-black-50">{{item.name}}</small>
                                </td>
                                <td>
                                    <small class="text-black-50">{{item.type}}</small>
                                </td>
                                <td>
                                    <small class="text-black-50">
                                        {{item.createdBy}}
                                    </small>
                                </td>
                                <td class="text-black-50">
                                    <small>
                                        <i class="far fa-clock"
                                            title="Created at {{item.createdDateTime | utcToLocal:'d.M.yyyy h:mm a'}}"></i>
                                    </small>
                                </td>
                                <td class="text-black-50">
                                    <small ng-if="item.status == 'Published'">🟢</small>
                                    <small ng-if="item.status == 'Schedule'">🟡</small>
                                    <small ng-if="item.status == 'Draft'">🔴</small>
                                    <small ng-if="item.status == 'Deleted'">⚫️</small>
                                </td>
                                <td>
                                    <!-- <div class="btn-group btn-group-sm btn-group-sm float-end" role="group"
                                        aria-label="Actions">
                                        <a href="/portal/mix-database-data/create?mixDatabaseId={{item.id}}&mixDatabaseName={{item.name}}&mixDatabaseTitle={{item.title}}&dataId=default"
                                            title="Add Data" class="dropdown-item border-radius-md">
                                            <span class="fas fa-plus"></span>
                                        </a>
                                        <a href="/portal/mix-database-data/list?mixDatabaseId={{item.id}}&mixDatabaseName={{item.name}}&mixDatabaseTitle={{item.title}}"
                                            title="List Data" class="dropdown-item border-radius-md">
                                            <span class="fas fa-database"></span>
                                        </a>
                                        <a href="/portal/mix-database/details/{{item.id}}" title="Edit table"
                                            class="dropdown-item border-radius-md">
                                            <span class="fas fa-tools"></span>
                                        </a>
                                        <a ng-click="remove(item.id);" class="btn btn-link text-danger">
                                            <span class="fas fa-trash-alt"></span>
                                        </a>
                                    </div> -->
                                    <div class="dropdown float-lg-end ms-auto pe-1">
                                        <a href="javascript:;" class="cursor-pointer" id="dropdownTable2"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fa fa-ellipsis-h text-secondary" aria-hidden="true"></i>
                                        </a>
                                        <ul class="dropdown-menu px-2 py-3 ms-sm-n4 ms-n5"
                                            aria-labelledby="dropdownTable2" style="">
                                            <li><a href="/portal/mix-database-data/create?mixDatabaseId={{item.id}}&mixDatabaseName={{item.name}}&mixDatabaseTitle={{item.title}}&dataId=default"
                                                    title="Add new data item" class="dropdown-item border-radius-md">
                                                    <span class="fas fa-plus"></span> Add new data item
                                                </a>

                                            </li>
                                            <li><a href="/portal/mix-database-data/list?mixDatabaseId={{item.id}}&mixDatabaseName={{item.name}}&mixDatabaseTitle={{item.title}}"
                                                    title="Data list" class="dropdown-item border-radius-md">
                                                    <span class="fas fa-database"></span> Data list
                                                </a>

                                            </li>
                                            <li><a href="/portal/mix-database/details/{{item.id}}"
                                                    title="Config database" class="dropdown-item border-radius-md">
                                                    <span class="fas fa-tools"></span> Config database
                                                </a>

                                            </li>
                                            <li><a ng-click="remove(item.id);" class="btn btn-link text-danger">
                                                    <span class="fas fa-trash-alt"></span> Delete database
                                                </a>

                                            </li>
                                        </ul>
                                    </div>
                                    <div class="btn-group float-lg-end me-3">
                                        <a href="/portal/mix-database-data/create?mixDatabaseId={{item.id}}&mixDatabaseName={{item.name}}&mixDatabaseTitle={{item.title}}&dataId=default"
                                            title="Add new data item" class="btn btn-sm btn-light">
                                            <span class="fas fa-plus"></span>
                                        </a>
                                        <a href="/portal/mix-database-data/list?mixDatabaseId={{item.id}}&mixDatabaseName={{item.name}}&mixDatabaseTitle={{item.title}}"
                                            title="Data list" class="btn btn-sm btn-light">
                                            <span class="fas fa-database"></span>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="card-body">
                    <paging class="small" page="request.pageIndex + 1" page-size="request.pageSize"
                        total="data.totalItems" ul-class="pagination justify-content-end m-0" a-class="page-link"
                        paging-action="getList(page-1)" scroll-top="true">
                    </paging>
                </div>
            </div>

        </div>
    </div>
</div>